• Example
• Properties
• Methods
• Errorbars
• Combining the Line and Bar charts
• Alternative colors
• Accumulative filled Line charts
• Custom tickmarks
• The coords2 array
• Note about the data_arr array
• Effects
• Summary

Example

<script>
    // The data for the Line chart. Here we use multiple arrays for showing multiple lines.
    // Though it can just be an array of numbers to show just one line: var data = [4,8,6,5,8,7,5,6,6];
    var data = [
        [8,7,6,4,9,5,6,7,9],
        [4,3,5,8,6,4,2,4,9],
        [8,4,9,5,3,5,1,2,5]
    ];

    var line = new RGraph.Line({
        id: 'cvs',
        data: data,
        options: {
            BackgroundBarcolor1: 'white',
            BackgroundBarcolor2: 'white',
            BackgroundGridColor: 'rgba(238,238,238,1)',
            colors: ['rgba(0,0,0,0)'],
            linewidth: 2,
            filled: true,
            fillstyle: ['red','blue','#0f0'],
            hmargin: 5,
            shadow: false,
            tickmarks: false,
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            gutterLeft: 40
        }
    }).draw();
</script>

The example file is here.

Properties

You can use these properties to control how the chart apears. You can set them by including them in the options section of the configuration as above.

• Background
• Labels and text
• Margins
• Colors
• Shadow
• Interactive features
• Titles
• Key
• Scale
• Axis properties
• Zoom
• Events
• Miscellaneous

Background

• top left
• bottom right
• bottom
• right

Labels and text

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

Margins

Colors

Shadow

Interactive features

Titles

Key

Scale

function myFormatter(obj, num)
{
    return num + 'F'; // An example of formatting
}
myGraph.set('scale.formatter', myFormatter);

Axis properties

Zoom

Events

Miscellaneous

• circle
• filledcircle
• endcircle
• square
• endsquare
• filledsquare
• filledendsquare
• tick
• halftick
• endtick
• cross
• dot
• borderedcircle (same as dot)
• arrow
• filledarrow
• triangle
• filledtriangle

Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting.

Also note that now (10th August 2010) as well as a string, this can be an array of different tickmark styles.

As of August 2014 this can be a location/URL of an image file to use as the tickmarks or a data: URL. See below for details
Default: null

tickmarksDotStroke
This is the color of the filled part of the dot/borderedcircle style tickmarks.
Default: null (defaults to the line color)

tickmarksDotFill
This is the color of the stroked part of the dot/borderedcircle style tickmarks.
Default: null (defaults to the line color)

tickmarksDotLinewidth
This is the width of the line used when drawing the tickmarks.
Default: 0

tickmarksImageHalign
This can be left, right or center and determines the horizontal alignment of the tickmark.
Default: center

tickmarksImageValign
This can be top, bottom or center and determines the vertical alignment of the tickmark.
Default: center

tickmarksImageOffsetx
After the alignment has been applied, this is added to the X coordinate of the tickmark.
Default: 0

tickmarksImageOffsety
After the alignment has been applied, this is added to the Y coordinate of the tickmark.
Default: 0

stepped
Draws the line as stepped. Useful for showing stock performance for example.
Default: false

linewidth
The width of the line (ie the actual line on the chart). Note: If your line is stepped and filled, and you don't want a trailing line indicating the last value, you can set this to zero.
Default: 1

variant
At present this can only be 3d, and gives a small 3D effect.
Default: null

animationUnfoldX
This is used by the Unfold Line chart animation and dictates whether the X value is unfolded.
Default: false

animationUnfoldY
This is used by the Unfold Line chart animation and dictates whether the Y value is unfolded.
Default: true

animationUnfoldInitial
This property can be used to set the initial factor for the Unfold animation. Setting this to a value less than one will cause the line to expand outwards, whilst a value greater than one will cause the line to contract towards the correct values.
Default: 2

highlightStyle
By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. Its passed the shape object as an argument.
Default: null

highlightStroke
If you use tooltips, this controls the colour of the highlight stroke.
Default: black

highlightFill
If you use tooltips, this controls the colour of the highlight fill.
Default: rgba(255,255,255,0.5)

spline
This option causes the line to be drawn as a spline - ie curvy. Not all options will work with splines - however the introduction of real splines over the previous curvy option is a significant improvement. The line chart on the front page of the website shows this option. Null values will not work with splines.
Default: false

clearto
This is used in animations and effects as the default color to use when the canvas.
Default: null

combinedchartEffect
Set this to the name of an effect (eg grow ) and the CombinedChart object will use that effect to draw the chart instead of the regular draw() function
Default: null

combinedchartEffectOptions
This should be a STRING that contains a JavaScript object of options for the effect function like this:

combinedchartEffectOptions: '{frames: 300}'

Methods

• The chart object
• The X coordinate
• The Y coordinate
• The numerical index of the point. This corresponds (for example) to the tooltips array, and the coordinates array

The shape also includes textual indexes like this: shape['object'] And they are:

• object
• x
• y
• tooltip
• index
• index_adjusted
• dataset

<canvas id="cvs" width="600" height="300">[No canvas support]</canvas>

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

<script>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [10,4,2,4,1],
        options: {
            hmargin: 10,
            tickmarks: 'endcircle',
            labels: ['Fred','John','Kev','Lou','Pete']
        }
    }).draw();
    
    line.canvas.onmousemove = function (e)
    {
        RGraph.fixEventObject(e);

        var ca  = e.target;
        var co  = ca.getContext('2d');
        var obj = e.target.__object__;
      
        // This is the method which simplifies getting coordinates
        var point = obj.getShape(e);
      
      
        if (point) {
            
            ca.style.cursor = 'pointer';
            
            // Is this the same tooltip as the one (if any) that's already being shown
            if (RGraph.Registry.get('chart.tooltip') && RGraph.Registry.get('chart.tooltip').__index__ == point[3]) {
                return;
            }

            // Start afresh
            RGraph.redraw();

            // Show the tooltip
            RGraph.tooltip(ca, obj.get('labels')[point[3]], e.pageX, e.pageY, point[3]);

            // Highlight the point
            co.strokeStyle = 'gray';
            co.fillStyle = 'white';
            co.beginPath();
            co.moveTo(point[1], point[2]);
            co.arc(point[1], point[2], 2, 0, 6.26, 0);
            co.stroke();
            co.fill();
            
            return;
        }
        
        ca.style.cursor = 'default';
    }
    
    window.onclick = function ()
    {
        RGraph.redraw();
    }
</script>

This method can be used to get the value at a particular point or at the mouse coordinates, based on the scale that is in use. Not simply the coordinates of the mouse. The argument can either be an event object (for use in event listener functions) OR a two element array consisting of the X and Y coordinates (ie when you're not necessarily in an event listener). It returns null if the mouse or coordinates are in the gutter areas. An example:

line.canvas.onclick = function (e)
{
    var obj   = e.target.__object__;
    var value = obj.getValue(e);
    
    // ...
}

This method can be used to get an appropriate Y coord for a value when you're doing custom drawing on the chart. It returns the coordinate for the max/min value if the given number is out of range.

This method can be used to set an event listener on an object. It operates in a similar way to the jQuery .on() function - the first argument is the event you wish to attach to and the second is the handler function. For example:

.on('draw', function (obj)
{
    // Put event code here
});

The exec function is documented here.

The hide function hides a line by setting the color to rgba(0,0,0,0). Tooltips and other interactive features still work even though the line is not visible. You can give either an integer (the index of the relevant line), an array of line indexes, or no argument at all in which case all lines are hidden

This function is the reverse of the above.

This function returns true or false as to whether the given line index is hidden or not.

Errorbars

Errorbars can allow you show an upper and lower range for a particular point like this example page here shows. You can specify errorbars like this:

var line = new RGraph.Line({
    id: 'cvs',
    data: [12,18,10,8,5,4,3,2,14,5,6,9],
    options: {
        min: 5,
        errorbars: [1, [1,5],[5,1,'red',10],3,3,3,3,3,3,3,3,3,3],
        //errorbarsLinewidth: 10,
        //errorbarsColor: 'red',
        //errorbarsCapped: false,
        //errorbarsCappedWidth: 50,
        hmargin: 15,
        tickmarks: 'circle',
        scaleZerostart: true,
        noxaxis: true
    }
}).draw();

This would give you errorbars for each point and the elements of each errorbar array are (each one is optional - specify null if you want to give no value):

• The upper extent of the errorbar
• The lower extent of the errorbar
• The color of this errorbar
• The linewidth of this errorbar
• The (total) width of the cap at the end of this errorbar

Combining the Line and Bar charts

You can combine the Bar and Line charts with. Find out more here. In the same vein, you can have Y axes on both the left and right sides.

Alternative colors

Instead of a string stipulating the color, each element of the colors array can itself be a two element array, stipulating the up color, and the down color. To use alternating colors you must also stipulate the alternate property:

myLine.set('colors.alternate', true);
myLine.set('colors', ['red', ['blue', 'yellow'], 'green]);

Accumulative filled Line charts

The default behaviour of filled Line charts is to "stack" the lines on top of each other. This allows them all to be totally visible, no matter what (unless a line has a zero value of course). If this is not desired, then there is an option (filled.accumulative - true/false) to change this behaviour so the lines are plotted "as-is". Keep in mind that if you set this option to false (ie the Lines are plotted as-is) it may be wiser to use semi-transparent colors or some parts of data sets (or even entire data sets) may be hidden by others. There's a comparison of the different modes here.

Custom tickmarks

If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, enabling you to draw the tickmark yourself. For example:

<script>
    line.set('tickmarks', myTick);

    /**
    * The function that is called once per tickmark, to draw it
    * 
    * @param object obj   The chart object
    * @param array  data  The entire line data
    * @param number value The individual points value
    * @param number index The current index, in the data array
    * @param number x     The X coordinate
    * @param number y     The Y coordinate
    * @param string color The color of the line
    * @param number prevX The previous X coordinate
    * @param number prevY The previous Y coordinate
    */
    function myTick (obj, data, value, index, x, y, color, prevX, prevY)
    {
        // Draw your custom tick here
    }
</script>

As of August 2014 you can also specify an image to use as a tickmark. Various styles of URL are supported:

obj.set({tickmarks: 'image:foo.png'});     // Starts with image: prefix
obj.set({tickmarks: '/images/foo.png'});   // Starts with a /
obj.set({tickmarks: '../images/foo.png'}); // Starts with ../
obj.set({tickmarks: 'data: ...'});         // Starts with data: (for inline images)
obj.set({tickmarks: 'images/foo.png'});    // Starts with images/

The coords2 array

The __index2__ property on tooltips

When showing tooltips, one property of the tooltip is .__index2__. This is the index that pertains to the individual dataset. In a function called from the ontooltip event you can access it like this:

function myFunc (obj)
{
    var idx = RGraph.Registry.get('chart.tooltip').__index2__;
}
RGraph.addCustomEventListener(obj, 'ontooltip', myFunc  );

Note about the data_arr array

Animation Effects

• Unfold effect
• UnfoldFromCenter effect
• UnfoldFromCenterTrace effect
• FoldToCenter effect
• Trace2 effect

<script>
    /**
    * Optional callback function that's called when the effect is complete
    */
    function myCallback (obj)
    {
        // ...
    }

    var obj = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 56,
        options: {
            gutterLeft: 35,
            hmargin: 5
        }
    }).trace2({frames: 60}, myCallback)
    // .unfold({frames: 60}, myCallback)
    // .unfoldFromCenter({frames: 60}, myCallback)
    // .unfoldFromCenterTace({frames: 60}, myCallback)
    // .foldToCenter({frames: 60}, myCallback)
    // .trace2({frames: 60}, myCallback)
</script>